<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <link rel="stylesheet" href="../plugins/element-ui_2.14.1.css">
    <link rel="stylesheet" href="../assests/base.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <script src="../assests/base.js"></script>
    <script src="../plugins/vue_2.5.2.js"></script>
    <script src="../plugins/element-ui_2.14.1.js"></script>
    <script src="../plugins/validate.js"></script>

</head>
<body>
<div id="pc" v-cloak>
    <div class="login-box" id="loginBox">
        <!--验证码登陆和密码登陆-->
        <div class="login-content">
            <div class="login-logo"></div>
            <div class="login-tab">
                <p class="login-tab-title">
                    <span :class="{'tab-active':tabFlagTel}" @click="tabFlagTel=true">快速登陆注册</span>
                    <span :class="{'tab-active':!tabFlagTel}" @click="tabFlagTel=false">密码登陆</span>
                </p>
                <!--验证码登陆-->
                <div class="login-tel-box clearfix" v-show="tabFlagTel" style="position: relative">
                    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" class="demo-ruleForm">
                        <el-form-item prop="tel">
                            <el-input v-model.trim="ruleForm1.tel" placeholder="请输入手机号码" class="login-tel"  maxlength="11"></el-input>
                            <img src="../images/login-icon-tel@2x.png" alt="" class="login-tel-img-po">
                        </el-form-item>
                        <el-form-item  prop="codeImg" style="width: 206px;position: relative">
                            <el-input type="text" v-model.trim="ruleForm1.codeImg"  placeholder="请输入图形验证码" maxlength="4"></el-input>
                            <img src="../images/login-icon-num@2x.png" alt="" class="login-tel-img-po">
                            <div class="el-form-item__error" v-if="codeImgFlagCheck">请输入正确的图形验证码</div>
                            <canvas id="canvas" width="107" height="40" @click="canvasClick"></canvas>
                        </el-form-item>
                        <el-form-item prop="num" style="width: 206px">
                            <el-input v-model.trim="ruleForm1.num" placeholder="请输入短信验证码" class="login-tel" auto-complete="off" maxlength="6"></el-input>
                            <img src="../images/login-icon-num@2x.png" alt="" class="login-tel-img-po">
                        </el-form-item>
                    </el-form>
                    <span class="login-get-num" @click="getNumCode" v-if="getCodeFlag">获取验证码</span>
                    <span class="login-get-num" v-else>{{againText}}</span>
                </div>
                <!--密码登陆-->
                <div class="login-password-box clearfix" v-show="!tabFlagTel">
                    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
                        <el-form-item prop="tel">
                            <el-input v-model.trim="ruleForm2.tel" placeholder="请输入手机号码" class="login-tel"  maxlength="11"></el-input>
                            <img src="../images/login-icon-tel@2x.png" alt="" class="login-tel-img-po">
                        </el-form-item>
                        <el-form-item prop="pass">
                            <el-input :type="imgEyeFlag ? 'password' : ''" v-model.trim="ruleForm2.pass" auto-complete="off" placeholder="请输入密码" class="login-password"></el-input>
                            <img src="../images/logn-icon-password@2x.png" alt="" class="login-tel-img-po">
                            <!-- <img src="../images/close@3x.png" alt="" class="login-psw-img-eye" @click="switchOpenOrClose"> -->
                            <img :src="imgEyeFlag ? imgClose : imgOpen" alt="" class="login-psw-img-eye" @click="switchOpenOrClose">
                        </el-form-item>
                    </el-form>
                </div>
                <div class="login-btn" @click="loginTelOrPassword()">登陆</div>
            </div>
            <div class="login-forget-password" v-show="!tabFlagTel" @click="changePassword=true">忘记密码</div>
        </div>
        <!--找回密码-->
        <div class="change-password-large-box" v-show="changePassword">
            <div class="change-password-box">
                <p class="change-title">
                    找回密码
                    <img src="../images/icon-close@2x.png" alt="" class="change-close" @click="changePassword=false">
                </p>
                <el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3" label-width="0" class="change-password-ruleForm"
                         id="ruleForm3">
                    <el-form-item label="" prop="tel">
                        <el-input type="text" v-model.trim="ruleForm3.tel" auto-complete="off" placeholder="请输入手机号码" maxlength="11"></el-input>
                        <img src="../images/login-icon-tel@2x.png" alt="" class="login-tel-img-po">
                    </el-form-item>
                    <el-form-item label="" prop="code">
                        <el-input type="text" v-model.trim="ruleForm3.code" auto-complete="off" placeholder="请输入验证码"
                                  style="width: 58%;float: left" maxlength="6"></el-input>
                        <img src="../images/login-icon-num@2x.png" alt="" class="login-tel-img-po">
                        <span class="changePassword-right-sendcode" @click="getNumCode3" v-if="getCodeFlag3">获取验证码</span>
                        <span class="changePassword-right-sendcode codeNumTime" v-else>{{againText3}}</span>
                    </el-form-item>
                    <el-form-item label="" prop="pass">
                        <el-input type="password" v-model.trim="ruleForm3.pass" auto-complete="off" placeholder="请输入新密码"
                                  id="pass" maxlength="20"></el-input>
                        <img src="../images/logn-icon-password@2x.png" alt="" class="login-tel-img-po">
                    </el-form-item>
                    <el-form-item label="" prop="checkPass">
                        <el-input type="password" v-model.trim="ruleForm3.checkPass" auto-complete="off" placeholder="请确认密码"
                                  id="checkPass" maxlength="20"></el-input>
                        <img src="../images/logn-icon-password@2x.png" alt="" class="login-tel-img-po">
                    </el-form-item>
                    <el-form-item>
                        <span class="changePassword-btn" @click="updatepwd">确认修改</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <p class="login-copyright">版权所有:阳光三泰保险经纪有限公司京ICP备18024524号-1</p>
    </div>



</div>

<script src="../plugins/axios.js"></script>
<script src="../plugins/axios.config.js"></script>
<script type="text/javascript" src="../js/login.js"></script>

</body>
</html>